<template>
	<view class="content">
		<view class="uni-forms" ref="baseFormData">
			<view class="uni-forms-item__content">
				<text class="label1">收货人</text>
				<uni-forms :modelValue="baseFormData">
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入收货人" @input="input" />
				</uni-forms>
			</view>
			<view class="uni-forms-item__content">
				<text class="label1">手机号码</text>
				<uni-forms :modelValue="baseFormData">
						<uni-easyinput v-model="baseFormData.num" placeholder="请填写收货人手机号码" @input="number" />
				</uni-forms>
			</view>
			<view class="uni-forms-item__content">
				<text class="label1">所在地区</text>
				<uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
					@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
				</uni-data-picker>
			</view>
			<view class="uni-forms-item__content">
				<text class="label1">详细地址</text>
				<uni-forms :modelValue="baseFormData">
						<uni-easyinput v-model="baseFormData.dz" placeholder="请输入详细地址" @input="xxdz" />
				</uni-forms>
			</view>
			<view class="uni-forms-item__content">
				<text class="label1">设为默认地址</text>
				<u-switch activeColor="#27ba9b" v-model="ss" @change="change"></u-switch>
			</view>
		</view>
	</view>
	<button @click="act">保存并使用</button>
</template>

<script setup>
import {ref} from 'vue'
    const ss = ref(false);
    const baseFormData = ref({
      name: '',
	  num:"",
	  dz:""
    });
    const rules = ref({
      name: {
        rules: [{ required: true, message: '收货人不能为空' }]
      },
		num: {
		rules: [
			{ 
			required: true, 
			message: '手机号码不能为空' 
			},
			{
			pattern: /^1[3-9]\d{9}$/,
			message: '手机号码格式不正确'
			}
		]
		},
	  dz: {
	    rules: [{ required: true, message: '详细地址不能为空' }]
	  },
    });
    const classes = ref('');
	const defaultAddress=ref(false)
    const dataTree = ref([
      {
        text: "天津市",
        value: "1-0",
        children: [
          { text: "天津市", value: "1-1" },
          { text: "河东区", value: "1-2" }
        ]
      },
      {
        text: "山西省",
        value: "2-0",
        children: [
          { text: "太原市", value: "2-1" },
          { text: "长治市", value: "2-2" }
        ]
      },
      {
        text: "江苏省",
        value: "3-0",
        children: [
          { text: "南京市", value: "3-1" },
          { text: "苏州市", value: "3-2" }
        ]
      }
    ]);

    const onnodeclick = (e) => {
      console.log(e);
    };

    const onpopupopened = (e) => {
      console.log('popupopened');
    };

    const onpopupclosed = (e) => {
      console.log('popupclosed');
    };

    const onchange = (e) => {
      console.log('onchange:', e);
    };

    const change = (e) => {
      console.log('change', e);
    };
	
	const input=(e)=> {
		console.log('收货人：', e);
	}
	const number=(e)=>{
		console.log("手机号码",e);
	}
	const xxdz=(e)=>{
		console.log("详细地址",e);
	}

    const act = () => {
      console.log("保存");
	  				if (name.value && num.value && classes.value && dz.value) {
	  					console.log('保存并使用：', name.value, num.value, classes.value, dz.value);
						// 跳转管理
						uni.navigateTo({
							url:"/pages/setUp/setUp"
						})
	  				} else {
	  					console.log('请填写完整信息');
	  				}
    };
</script>

<style lang="scss">
	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	 .popper__arrow {
    top: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #EBEEF5;
}
 .popper__arrow {
    top: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #EBEEF5;
}

.content{
		margin: 0.625rem 0.625rem 0.625rem;
	    padding: 0.625rem 0.625rem;
	    border-radius: 0.3125rem;
	    background-color: #fff;
		.uni-forms-item__content{
			padding-top: 10rpx;
			margin-bottom: 30rpx;
			position: relative;
			    font-size: 14px;
			    flex: 1;
			    box-sizing: border-box;
				.label1{
					color: #333;
				}
				.u-switch{
					float: right;
				}
		}
}
button{
	    height: 2.5rem;
	    margin: 0.9375rem 0.625rem;
	    color: #fff;
	    border-radius: 2.5rem;
	    font-size: .9375rem;
	    background-color: #27ba9b;
}
</style>
